{{define "base"}}
<html>
<head>
  <link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
  <script src="/bower_components/material-design-lite/material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>{{block "title" .}}Machine DB{{end}}</title>
  {{block "head" .}}
  {{end}}
  <style>
    .login {
       display:flex;
       justify-content:flex-end;
       align-items:center;
    }
  </style>
</head>

<body>
  <div class="login">
    {{if .IsAnonymous}}
    <a href="{{.LoginURL}}"><button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">LOGIN</button></a>
    {{else}}
      <span>{{.User.Email}}</span>
      <a href="{{.LogoutURL}}"><button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">LOGOUT</button></a>
    {{end}}
  </div>

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
            mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row" style="background-color:#900";>
      <div class="mdl-layout-spacer"></div>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Crimson</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="/datacenters">Datacenters</a>
      <a class="mdl-navigation__link" href="/platforms">Platforms</a>
      <a class="mdl-navigation__link" href="/oses">OSes</a>
      <a class="mdl-navigation__link" href="/vlans">VLANs</a>
      <a class="mdl-navigation__link" href="/racks">Racks</a>
      <a class="mdl-navigation__link" href="/KVMs">KVMs</a>
      <a class="mdl-navigation__link" href="/switches">Switches</a>
      <a class="mdl-navigation__link" href="/nics">NICs</a>
      <a class="mdl-navigation__link" href="/machines">Machines</a>
      <a class="mdl-navigation__link" href="/hosts">Hosts</a>
      <a class="mdl-navigation__link" href="/dracs">DRACs</a>
      <a class="mdl-navigation__link" href="/vms">VMs</a>
    </nav>
  </div>


  <div style="margin-left:250px";>
    {{block "content" .}}
    {{end}}
  </div>

  <footer>
    <hr style="margin: 10px 0px;">
    <p style="color: #cccccc; font-family: sans-serif; font-size: small;">
      Version: <span>{{.AppVersion}}</span>
    </p>
  </footer>
</body>

</html>
{{end}}
